<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>添加用户</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
        	function method01(){
        		//每次按键弹起，就获取输入内容，如果输入的内容为8个内容，就通过ajax到后台验证
        		function checkUserName(userName){
        		    if(userName!=null&&userName.length==8){
        		    console.log('program>>> 获取到输入的8个字符内容');
        		        //获取网页中需要传送的数据
        		        var usernamevalue = document.getElementById('username').value;
        		        //把数据封装到js对象里
        		        var jsObject = new Object();
        		        jsObject.name = usernamevalue;
        		        var jsonString = JSON.stringify(jsObject);
        		        console.log('传送的json格式字符串为：' + jsonString + '。');
        		    //设置参数
        		    xhr.open('POST','${pageContext.request.contextPath }/servlet/checkusernameforservlet?key01='+new Date().getTime()+'');
        		    //告诉服务器端  数据的组织方式是json
        		    xhr.setRequestHeader('Content-Type','application/json');
        		        //步骤4：处理返回的内容
        		    xhr.onreadystatechange=function(){
        		    if(xhr.readyState==8){
        		    if(xhr.status==200){
        		    //返回的是json格式字符串
        		    var backContent=xhr.responseText;
        		    console.log('后台返回的内容为：'+backContent+'。')
        		        //把json格式字符串转换成json对象
        		        var jsonBack=eval('('+backContent+')')
        		        var usernamespan=document.getElementById('user_nameerror');
        		        usernamespan.innerHTML=jsonBack.name;

        		    }
        		    }
        		    }
        		        xhr.send(jsonString);
        		    }else {
        		        console.log('输入的内容不是8个！')
        		    }

        		    }
        		//用户名不能空，用户名的长度需要在1~8
        		//密码的内容不能为空，密码的长度需要在6~14
        		var textErrorElement=document.getElementById('user_nameerror');
        		var passwordErrorElement=document.getElementById('user_passworderror');
        		textErrorElement.innerHTML='<font>*用户名必须是1-8位</font>';
        		passwordErrorElement.innerHTML='<font>*密码必须是6-14位</font>';
        		//获取文本框里输入的内容
        		var textElement=document.getElementById('user_name');
        		var textContext=textElement.value;
        		//判断是否符合条件
        		if(!(textContext!=null&&textContext.length>=1&&textContext.length<=8)){
        			textErrorElement.innerHTML='<font color="red">&nbsp;&nbsp;&nbsp;用户名出错！</font>';
        			return;
        		}
        		//获取密码框输入的内容
        		var passwordElement=document.getElementById('user_password');
        		var passwordContent=passwordElement.value;
        		//判断是否符合条件
        		if(!(passwordContent!=null&&passwordContent.length>=6&&passwordContent.length<=14)){
        			passwordErrorElement.innerHTML='&nbsp;&nbsp;&nbsp;<font color="red">密码出错！</font>';
        			return;
        		}
        		//实现表单的提交
        		var formElement=document.getElementById('myform');        	}
        	formElement.action="/project06/servlet/adduserforservlet";
        	formElement.method="post";
        	formElement.submit();
        </script>
</head>
<body>
	<form id="myform">
		用户名：<input type="text" id="user_nameID" name="username"
			maxlength="8" onkeyup="checkUserName(this.value)"> <span
			id="user_nameerror"><font>*用户名必须是8位</font></span><br> 密码：<input
			type="password" id="user_password"><span
			id="user_passworderror"><font>*密码必须是6-14位</font></span><br> 备注：<input
			type="text" id="user_desc"><br> 状态：<input type="radio"
			id="user_flag" value="1" checked="checked"> 启用 <input
			type="radio" id="user_flag" value="0"> 禁用 <br> <input
			type="button" value="添加" onclik="method01()"> <input
			type="reset" value="清空">



	</form>


</body>
</html>